{% load thumbnail %}
{% load i18n %}

<div class="product-gallery">
{% with group_product=product.parent|default:product %}
{% with all_images=group_product.images.all %}
    {# use length rather then count as the images get queried anyways #}

    {% if all_images|length > 1 %}

    <div id="product-image-carousel" class="flexslider">
        <ul class="slides">
            {% for image in all_images %}
            <li>
                {% thumbnail image.original "600x600" upscale=False as thumb %}
                <img src="{{ thumb.url }}" data-large="{{ image.original.url }}" alt="image02" data-description="{% if image.caption %}{{ image.caption }}{% endif %}" />
                {% endthumbnail %}
            </li>
            {% endfor %}
        </ul>
    </div>

    {% else %}
        {# Only one image to show #}
        <div class="image_container">
            {% with image=group_product.primary_image %}
                {% thumbnail image.original "600x600" upscale=False as thumb %}
                {% if not image.is_missing %}
                    <img src="{{ thumb.url }}" data-large="{{ image.original.url }}" alt="image02" data-description="{% if image.caption %}{{ image.caption }}{% endif %}" />
                {% else %}
                    <img src="{{ thumb.url }}" alt="image02" />
                {% endif %}
                {% endthumbnail %}
            {% endwith %}
        </div>
    {% endif %}
{% endwith %}
{% endwith %}
</div>
